<!--
 * @Author: 张卓南
 * @Date: 2023-10-17 23:19:59
 * @LastEditTime: 2023-10-20 15:30:13
 * @Description: 搜索结果
-->
<template>
  <div style="">
    <div
      style="
        height: 440px;
        background-color: rgb(36, 202, 239);
        border-radius: 20px;
      "
    >
      <GoBack>
        <div class="flex flex-col items-center justify-center">
          <div
            class="text-darkBlue dark:text-garyWhite text-22px font-black enter-y"
          >
            搜索结果
          </div>
        </div>
      </GoBack>
      <div class="parent">
        <van-button
          round
          class="child"
          @click="handleClick('1')"
          :type="active == '1' ? 'success' : undefined"
          >往返</van-button
        >
        <van-button
          round
          class="child"
          @click="handleClick('0')"
          :type="active == '0' ? 'success' : undefined"
          >单程</van-button
        >
      </div>
    </div>
  </div>
  <div class='show-card p-4 mt-[-280px]'>
    <Card :data="sharedData"  />
  </div>
</template>

<script lang="ts">
import { computed, onMounted, reactive, ref, unref, toRefs } from "vue";
import GoBack from "@/components/GoBack.vue";
let active = ref("1");

const handleClick = (type: string) => {
  active.value = type;
};
// 引入组件
import Card from "@/components/Card.vue";
export default {
  name: "Result",
  // 注册组件
  components: {
    Card,
  },
  setup() {
    const sharedData = reactive({
      resultList: [
        {
          loginName: "张三",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "九峰",
          price: "",
        },
        {
          loginName: "李四",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "光谷天地",
          price: "",
        },
        {
          loginName: "王五",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "光谷大道",
          price: "",
        },
        {
          loginName: "小六",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "佛祖岭",
          price: "",
        },
        {
          loginName: "kobe",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "汉阳",
          price: "",
        },
        {
          loginName: "李雷",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "汉口火车站",
          price: "",
        },
        {
          loginName: "韩梅梅",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "天河机场",
          price: "",
        },
        {
          loginName: "Jamse",
          mobileNum: "",
          licenseNum: "",
          driveCertificateDate: "",
          upWorkSeat: 2,
          downWorkSeat: 1,
          workplace: "花山",
          homeAddress: "光谷天地",
          price: "",
        },
      ],
    });

    return {
      handleClick,
      active,
      sharedData
    };
  },
};
</script>

<style scoped lang="less">
:deep(.van-field__left-icon) {
  display: flex;
}
:deep(.van-field__right-icon) {
  display: flex;
}
.show-card{
 display:flex;
 flex-wrap: wrap;
 overflow: scroll;
height: calc(100vh - 220px);
}
.parent {
  display: flex;
  margin-top: 16px;
  margin-left: 2rem;
}
.parent > .child {
  margin-right: 8px;
}

</style>
